import React, { useEffect, useLayoutEffect, useState } from "react";
import { useMouseMove,useCountDown } from "../hooks/01.base";
export const Counter2 = () => {
    const [count, setCount] = useState(0)

    // 每次渲染完毕才执行
    useEffect(() => {
        console.log(document.querySelector('h1')?.innerHTML);

    })

    return <>

        <h1>{count}</h1>
        <button onClick={() => setCount(pre => pre + 1)}>+1</button>
    </>
}


const Child = () => {
    const [color, setColor] = useState(null)

    useEffect(() => {
        const controller = new AbortController()
        fetch('https://api.liulongbin.top/v1/color', { signal: controller.signal })
            .then((res) => res.json())
            .then((res) => {
                console.log(res);
                setColor(res.data.color)
            })
            .catch((err) => console.log('消息' + err.message)
            )
        //return 清理函数
        // 清理函数执行的时机有两个：
        // 1.组件被卸载的时候，会被调用
        // 2、当Effect副作用函数调用之前，会先执行清理函数
        return () => controller.abort()
    }, [])
    return <>
        <p>color颜色为:{color}</p>
    </>

}

export const ColorCom = () => {
    const [visible, setVisble] = useState(true)

    return <>
        <button onClick={() => setVisble(pre => !pre)}>toggle</button>
        <hr />
        {visible && <Child />}
    </>
}

// 1、在组件卸载后对mousemove移除的操作
// 2、增加防抖功能 不操作了才执行
const Mouse = () => {
   const position=useMouseMove(100)

    return <>
        <p>鼠标的位置：{JSON.stringify(position)}</p>

    </>

}
export const MoveTracker = () => {
    const [visible, setVisble] = useState(true)
    return <>
        <button onClick={()=>setVisble(!visible)}>toggle</button>
        {visible&&<Mouse />}
    </>
}


// 做一个倒计时的功能 再封装hooks
export const  CountDown=()=>{
   const [count,disabled]=useCountDown()
    const handle=()=>{
        console.log('协议生效');
        
    }
    return <>
    <button disabled={disabled} onClick={handle}> {disabled ? `仔细阅读协议${count}秒`:`仔细阅读协议0秒`}</button>
    </>

}

// useEffect useLayoutEffect区别
export const Random=()=>{
    const [num,setNum]=useState(Math.random()*100)

    const reset=()=>{
        setNum(0)
    }

    // useEffect(()=>{ 会闪一下
    //     console.log('触发副作用函数',num);
    //     if(num===0){
    //         setNum(Math.random()*100)
    //     }
    // })
    useLayoutEffect(()=>{
        console.log('触发副作用函数',num);
            if(num===0){
                 setNum(Math.random()*100)
            }
    })
    return <>
    <p>num:{num}</p>
    <button onClick={reset}>重置为0</button>
    </>
}




